<template>
  <view class="typeList">
    <view class="list" v-for="item in typeList" :key="item.id" @click="skipType(item.id)">
      <image :src="item.image" mode="aspectFit" />
      <text class="grid-text">{{ item.title }}</text>
    </view>
  </view>
</template>
<script>


export default {
  data() {
    return {
      typeList: [{
        id: 1,
        image: require('../../static/xiaoyutong/PartTimeJobSearch.png'),
        title: '兼职求职'
      },
      {
        id: 2,
        image: require('../../static/xiaoyutong/RevelationOfSearchingForObjects.png'),
        title: '寻物启示'
      },
      {
        id: 3,
        image: require('../../static/xiaoyutong/secondHand.png'),
        title: '二手市场'
      },
      {
        id: 4,
        image: require('../../static/xiaoyutong/waste.png'),
        title: '废品回收'
      },
      ],
    }
  },
  methods: {
    // 跳转
    skipType(id) {
      switch (id) {
        case 1: {
          uni.navigateTo({
            url: '/pages_xiaoyutong/PartTimeJobSearch/PartTimeJobSearch'
          })
          break
        }
        case 2: {
          uni.navigateTo({
            url: '/pages_xiaoyutong/Lost/Lost'
          })
          break
        }
        case 3: {
          uni.navigateTo({
            url: '/pages_xiaoyutong/SecondHandMarket/SecondHandMarket'
          })
          break
        }
        case 4: {
          uni.navigateTo({
            url: '/pages_xiaoyutong/wasteRecovery/wasteRecovery'
          })
          break
        }
      }

    },
  }
}
</script>

<style lang="less" scoped>
.typeList {
  margin-top: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    image {
      width: 92rpx;
      height: 92rpx;
    }

    text {
      font-size: 28rpx;
      font-weight: 400;
      color: #3B3B3B;
      line-height: 48px;
    }
  }
}
</style>

